<template>
  <div class="flow-section">
    <el-tabs
      v-model="activeTab"
      :addable="!!flowData?.[activeTab]?.length"
      @tab-change="handleTabChange"
    >
      <template v-if="flowData?.[activeTab]?.length" #add-icon>
        <el-button type="primary" link @click="viewMore">
          查看更多<el-icon size="14"><DArrowRight /></el-icon>
        </el-button>
      </template>
      <el-tab-pane v-for="tab in flowTabs" :key="tab.oper" :label="tab.label" :name="tab.oper">
        <div class="flow-list" v-loading="loading">
          <div v-if="flowData?.[tab.oper]?.length" class="flow-container">
            <div class="flow-left">
              <div
                v-for="item in flowData?.[tab.oper]?.slice(0, 4)"
                :key="item.id"
                class="flow-item"
              >
                <div class="flow-name">{{ item.index }}.{{ item.assetName || item.name }}</div>
                <div class="flow-count">{{ item.count || item.remindCount }}</div>
                <div class="flow-type">{{ getTypeName(item.categoryId) }}</div>
                <div class="flow-time">{{ formatDate(item.createTime) }}</div>
              </div>
            </div>
            <div class="flex items-center">
              <el-divider class="!h-100px" direction="vertical" />
            </div>

            <div class="flow-right">
              <div v-for="item in flowData?.[tab.oper]?.slice(4)" :key="item.id" class="flow-item">
                <div class="flow-name">{{ item.index }}.{{ item.assetName || item.name }}</div>
                <div class="flow-count">{{ item.count || item.remindCount }}</div>
                <div class="flow-type">{{ getTypeName(item.categoryId) }}</div>
                <div class="flow-time">{{ formatDate(item.createTime) }}</div>
              </div>
            </div>
          </div>
          <el-empty v-else-if="!loading" class="!p-0" :image-size="68" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { DArrowRight } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/formatTime'

const props = defineProps<{
  flowTabs: Array<{ oper: string; label: string; path: string }>
  flowData: Record<string, any[]>
  typeList?: any[]
  loading: boolean
  onViewMore?: () => void
}>()

const emit = defineEmits<{
  (e: 'tab-change', oper: string): void
  (e: 'view-more'): void
}>()

const { push } = useRouter()

const activeTab = ref(props.flowTabs[0]?.oper || '')

const getTypeName = (categoryId: number) => {
  const findItem = props.typeList?.find((item) => item.id === categoryId)
  return findItem?.name
}
// 处理Tab切换
const handleTabChange = (oper: string) => {
  emit('tab-change', oper)
}

// 查看更多
const viewMore = () => {
  const findItem: any = props.flowTabs.find((item) => item.oper === activeTab.value)
  push(findItem?.path)
  emit('view-more')
}
</script>

<style scoped lang="scss">
.flow-section {
  padding: 0 18px 24px;
  background: #fff;
  border-radius: 8px;

  :deep() {
    .el-tabs__header {
      border-bottom: 2px solid var(--el-border-color-light);
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__nav-scroll {
      margin-top: 0;
    }

    .el-tabs__new-tab {
      width: auto;
      border: none;
    }
  }
}

.flow-list {
  min-height: 114px;
}

.flow-container {
  display: flex;
  gap: 10px;
  border-right: 1px solid #ebeef5;
}

.flow-left,
.flow-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flow-list-simple {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flow-item {
  display: flex;
  font-weight: 400;
  color: #4d4d4d;
  align-items: center;
  gap: 6px;
}

.flow-index {
  width: 30px;
}

.flow-name {
  flex: 1;
}

.flow-type,
.flow-count {
  flex: 1;
}

.flow-time {
  flex-shrink: 0;
}
</style>
